<template>
	<view class="pt-square-form">
		<view class="pt-square-form-tit">
			<text class="title-text">选择加入的广场</text>
			<u-icon name="close" size="28" @click="close"></u-icon>
		</view>
		<view class="pt-square-form-cells">
			<scroll-view scroll-y style="max-height: 600rpx; margin-top: 30rpx;">
				<view class="pt-square-form-cell" v-for="(data,index) in list" :key="index" @click="choseFilder(data.square_id,index)" :class="{active: current==index}">
					<view class="pt-square-form-cell-info">
						<image :src="data.cover_img"></image>
						<view class="cell-info-text">
							<view class="name">{{data.title}}</view>
							<view class="des">{{data.content}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="pt-square-form-cell" @click="addSquare">
				<view class="add"><u-icon name="plus" size="40"></u-icon></view>创建广场
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"pt-square-form",
		props: {
			goodsType: {
				type: Number,
				default: -1
			},
			goodsId: {
				type: Number | String,
				default: ''
			}
		},
		data() {
			return {
				list: [],
				current: -1
			};
		},
		onShow() {
			console.log('aaa')
			this.init()
		},
		created() {
			this.init()
		},
		methods: {
			init(){
				this.$u.api.SquareItem().then(res => {
					this.list = res.datas
				})
			},
			addSquare(){
				uni.navigateTo({
					animationDuration: 500,
					url: '/square/square-form'
				})
			},
			close(){
				this.$emit('close')
			},
			choseFilder(square_id,index){
				uni.showLoading({
					title: '正在加入'
				})
				this.current = index
				this.$u.api.GoodsUpSquare({square_id: square_id,goods_id: this.goodsId,goods_type: this.goodsType}).then(res => {
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: res.datas
					})
					this.close()
				})
			}
		}
	}
</script>

<style lang="scss">
	.pt-square-form{
		background-color: #FFF;
		padding: 30rpx;
		border-radius: 30rpx 30rpx 0 0;
		.pt-square-form-tit{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.title-text{
				font-size: 36rpx;
				font-weight: bold;
				color: #141414;
			}
		}
		.pt-square-form-cells{
			.pt-square-form-cell{
				display: flex;
				align-items: center;
				margin-top: 30rpx;
				font-size: 32rpx;
				color: #444;
				border: solid 1px #FFF;
				&:first-child{
					margin-top: 0;
				}
				&.active{
					border-color: #F59359;
					border-radius: 8rpx;
				}
				.pt-square-form-cell-info{
					display: flex;
					align-items: center;
					image{
						width: 100rpx;
						height: 100rpx;
						border-radius: 8rpx;
					}
					.cell-info-text{
						margin-left: 30rpx;
						.des{
							font-size: 28rpx;
							color: #808080;
							margin-top: 5rpx;
						}
					}
				}
				.add{
					width: 100rpx;
					height: 100rpx;
					border-radius: 8rpx;
					border: dashed 2rpx #AAA;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 30rpx;
				}
			}
		}
	}
</style>
